<template>
  <div class="app-container">

    <el-container>
      <el-main>

        <el-form ref="form" style="display:flex;  justify-content: space-between;  flex-wrap: wrap;" :model="getpage" label-width="80px">
          <el-form-item label="任务编号:">
            <el-input v-model="getpage.id" style="width: 350px;" placeholder="请输入任务编号" />
          </el-form-item>
          <el-form-item label="任务分配状态:" class="no-wrap-text">
            <el-select v-model="getpage.assignedStatus" placeholder="请选择" style="width: 300px; margin-left:20px;">
              <el-option label="未分配" value="1" />
              <el-option label="已分配" value="2" />
              <el-option label="待人工分配" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="满载状态:">
            <el-select v-model="getpage.loadingStatus" style="width: 300px;" placeholder="请选择">
              <el-option label="半载" value="1" />
              <el-option label="满载" value="2" />
              <el-option label="空载" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="车牌号码:">
            <el-input v-model="getpage.licensePlate" placeholder="请输入车牌号码" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="起始地机构:" class="no-wrap-text">
            <el-cascader

              :options="treeData"
              :props="defaultProps"
              clearable
              expand-trigger="hover"
              placeholder="请选择起始地机构"
              style="width: 300px; margin-left: 20px;"
              @change="handleNodeClick"
            />
          </el-form-item>
          <el-form-item label="目的地机构:" class="no-wrap-text">
            <el-cascader

              :options="treeData"
              :props="defaultProps"
              clearable
              expand-trigger="hover"
              placeholder="请选择目的地机构"
              style="width: 300px; margin-left: 20px;"
              @change="handleNodeClick2"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="searchList">搜索</el-button>
            <el-button @click="resetForm">重置</el-button>

          </el-form-item>

        </el-form>
      </el-main>

    </el-container>
    <el-tabs v-model="activeName" class="custom-tabs" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">全部
        <el-table
          :fit="true"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="运输任务编号"
            width="180"
          />
          <el-table-column
            width="180"

            prop="truck.licensePlate"
            label="车牌号码"
          />
          <el-table-column
            width="180"

            prop="startAgency.name"
            label="起始地"
          />
          <el-table-column
            prop="endAgency.name"
            label="目的地"
          />
          <el-table-column
            prop="status"
            label="运输任务状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.status===1">待提货</span>
              <span v-else-if="row.status===2">进行中</span>
              <span v-else-if="row.status===3">已完成</span>
              <span v-else>已取消</span>
            </template>

          </el-table-column>
          <el-table-column
            prop="address"
            label="车辆装载状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.loadingStatus===1">半载</span>
              <span v-else-if="row.loadingStatus===2">满载</span>
              <span v-else-if="row.loadingStatus===3">空载</span>

            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="任务分配状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.assignedStatus===2">已分配</span>
              <span v-else-if="row.assignedStatus===3">待人工分配</span>

            </template>
          </el-table-column>
          <el-table-column
            prop="planDepartureTime"
            label="计划发车时间"
            width="180"
          />
          <el-table-column
            prop="actualDepartureTime"
            label="实际发车时间"
            width="180"
          />
          <el-table-column
            prop="updated"
            label="更新时间"
            width="180"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
          >
            <template v-slot="{row}">
              <el-button
                type="text"
                size="small"
                @click="getTransport(row.id)"
              >
                查看
              </el-button>
              <el-button
                v-if="row.status!==1"
                type="text"
                size="small"
              >
                取消
              </el-button>
              <el-button
                v-else
                type="text"
                size="small"
                :disabled="true"
              >
                取消
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="editdetail(row.id)"
              >
                手动调整
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            :current-page="getpage.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="getpage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="待提货" name="second">待提货
        <el-table
          :fit="true"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="运输任务编号"
            width="180"
          />
          <el-table-column
            width="180"

            prop="truck.licensePlate"
            label="车牌号码"
          />
          <el-table-column
            width="180"

            prop="startAgency.name"
            label="起始地"
          />
          <el-table-column
            prop="endAgency.name"
            label="目的地"
          />
          <el-table-column
            prop="status"
            label="运输任务状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.status===1">待提货</span>
              <span v-else-if="row.status===2">进行中</span>
              <span v-else-if="row.status===3">已完成</span>
              <span v-else>已取消</span>
            </template>

          </el-table-column>
          <el-table-column
            prop="address"
            label="车辆装载状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.loadingStatus===1">半载</span>
              <span v-else-if="row.loadingStatus===2">满载</span>
              <span v-else-if="row.loadingStatus===3">空载</span>

            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="任务分配状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.assignedStatus===2">已分配</span>
              <span v-else-if="row.assignedStatus===3">待人工分配</span>

            </template>
          </el-table-column>
          <el-table-column
            prop="planDepartureTime"
            label="计划发车时间"
            width="180"
          />
          <el-table-column
            prop="actualDepartureTime"
            label="实际发车时间"
            width="180"
          />
          <el-table-column
            prop="updated"
            label="更新时间"
            width="180"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
          >
            <template v-slot="{row}">
              <el-button
                type="text"
                size="small"
                @click="getTransport(row.id)"
              >
                查看
              </el-button>
              <el-button
                v-if="row.status!==1"
                type="text"
                size="small"
              >
                取消
              </el-button>
              <el-button
                v-else
                type="text"
                size="small"
                :disabled="true"
              >
                取消
              </el-button>
              <el-button
                type="text"
                size="small"
              >
                手动调整
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            :current-page="getpage.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="getpage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="进行中" name="third">进行中
        <el-table
          :fit="true"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="运输任务编号"
            width="180"
          />
          <el-table-column
            width="180"

            prop="truck.licensePlate"
            label="车牌号码"
          />
          <el-table-column
            width="180"

            prop="startAgency.name"
            label="起始地"
          />
          <el-table-column
            prop="endAgency.name"
            label="目的地"
          />
          <el-table-column
            prop="status"
            label="运输任务状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.status===1">待提货</span>
              <span v-else-if="row.status===2">进行中</span>
              <span v-else-if="row.status===3">已完成</span>
              <span v-else>已取消</span>
            </template>

          </el-table-column>
          <el-table-column
            prop="address"
            label="车辆装载状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.loadingStatus===1">半载</span>
              <span v-else-if="row.loadingStatus===2">满载</span>
              <span v-else-if="row.loadingStatus===3">空载</span>

            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="任务分配状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.assignedStatus===2">已分配</span>
              <span v-else-if="row.assignedStatus===3">待人工分配</span>

            </template>
          </el-table-column>
          <el-table-column
            prop="planDepartureTime"
            label="计划发车时间"
            width="180"
          />
          <el-table-column
            prop="actualDepartureTime"
            label="实际发车时间"
            width="180"
          />
          <el-table-column
            prop="updated"
            label="更新时间"
            width="180"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
          >
            <template v-slot="{row}">
              <el-button
                type="text"
                size="small"
                @click="getTransport(row.id)"
              >
                查看
              </el-button>
              <el-button
                v-if="row.status!==1"
                type="text"
                size="small"
              >
                取消
              </el-button>
              <el-button
                v-else
                type="text"
                size="small"
                :disabled="true"
              >
                取消
              </el-button>

              <el-button
                :disabled="true"
                type="text"
                size="small"
              >
                手动调整
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            :current-page="getpage.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="getpage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="已完成" name="fourth">已完成
        <el-table
          :fit="true"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="运输任务编号"
            width="180"
          />
          <el-table-column
            width="180"

            prop="truck.licensePlate"
            label="车牌号码"
          />
          <el-table-column
            width="180"

            prop="startAgency.name"
            label="起始地"
          />
          <el-table-column
            prop="endAgency.name"
            label="目的地"
          />
          <el-table-column
            prop="status"
            label="运输任务状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.status===1">待提货</span>
              <span v-else-if="row.status===2">进行中</span>
              <span v-else-if="row.status===3">已完成</span>
              <span v-else>已取消</span>
            </template>

          </el-table-column>
          <el-table-column
            prop="address"
            label="车辆装载状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.loadingStatus===1">半载</span>
              <span v-else-if="row.loadingStatus===2">满载</span>
              <span v-else-if="row.loadingStatus===3">空载</span>

            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="任务分配状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.assignedStatus===2">已分配</span>
              <span v-else-if="row.assignedStatus===3">待人工分配</span>

            </template>
          </el-table-column>
          <el-table-column
            prop="planDepartureTime"
            label="计划发车时间"
            width="180"
          />
          <el-table-column
            prop="actualDepartureTime"
            label="实际发车时间"
            width="180"
          />
          <el-table-column
            prop="updated"
            label="更新时间"
            width="180"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
          >
            <template v-slot="{row}">
              <el-button
                type="text"
                size="small"
                @click="getTransport(row.id)"
              >
                查看
              </el-button>
              <el-button
                v-if="row.status!==1"
                type="text"
                size="small"
              >
                取消
              </el-button>
              <el-button
                v-else
                type="text"
                size="small"
                :disabled="true"
              >
                取消
              </el-button>
              <el-button
                type="text"
                size="small"
                :disabled="true"
              >
                手动调整
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            :current-page="getpage.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="getpage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="已取消" name="fifth">已取消
        <el-table
          :fit="true"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="运输任务编号"
            width="180"
          />
          <el-table-column
            width="180"

            prop="truck.licensePlate"
            label="车牌号码"
          />
          <el-table-column
            width="180"

            prop="startAgency.name"
            label="起始地"
          />
          <el-table-column
            prop="endAgency.name"
            label="目的地"
          />
          <el-table-column
            prop="status"
            label="运输任务状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.status===1">待提货</span>
              <span v-else-if="row.status===2">进行中</span>
              <span v-else-if="row.status===3">已完成</span>
              <span v-else>已取消</span>
            </template>

          </el-table-column>
          <el-table-column
            prop="address"
            label="车辆装载状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.loadingStatus===1">半载</span>
              <span v-else-if="row.loadingStatus===2">满载</span>
              <span v-else-if="row.loadingStatus===3">空载</span>

            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="任务分配状态"
            width="80"
          >
            <template v-slot="{row}">
              <span v-if="row.assignedStatus===2">已分配</span>
              <span v-else-if="row.assignedStatus===3">待人工分配</span>

            </template>
          </el-table-column>
          <el-table-column
            prop="planDepartureTime"
            label="计划发车时间"
            width="180"
          />
          <el-table-column
            prop="actualDepartureTime"
            label="实际发车时间"
            width="180"
          />
          <el-table-column
            prop="updated"
            label="更新时间"
            width="180"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
          >
            <template v-slot="{row}">
              <el-button
                type="text"
                size="small"
                @click="getTransport(row.id)"
              >
                查看
              </el-button>
              <el-button
                v-if="row.status!==1"
                type="text"
                size="small"
              >
                取消
              </el-button>
              <el-button
                v-else
                type="text"
                size="small"
                :disabled="true"
              >
                取消
              </el-button>
              <el-button
                type="text"
                size="small"
                :disabled="true"
              >
                手动调整
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            :current-page="getpage.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="getpage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="收货地址" custom-class="customclass" width="300" :visible.sync="dialogFormVisible">
      <el-form :model="manual">
        <el-form-item label="任务编号">
          <el-input v-model="manual.id" autocomplete="off" style="width: 350px;" />
        </el-form-item>
        <el-form-item label="运单数量">
          <el-input :disabled="true" autocomplete="off" style="width: 350px;" />
        </el-form-item>
        <el-form-item label="选择车次">
          <el-select v-model="manual.transportTripsId" style="width: 350px;" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="选择车辆">
          <el-select v-model="manual.truckId" style="width: 350px;" placeholder="请选择">
            <el-option :label="truck.licensePlate" :value="truck.truckTypeId" />

          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendinfo">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import { getTaskPage, getTransport, editdetail, treeList } from '@/api/task.js'
import { transListToTreeData } from '@/utils/index'

export default {
  data() {
    return {
      defaultProps: {
        label: 'name',
        value: 'id'
      },
      treeData: [],
      truck: {},
      dialogFormVisible: false,
      total: null,
      tableData: [],

      manual: {

        driverId: [
          0
        ],
        id: 0,
        transportTripsId: null,
        truckId: null

      },
      // 获取任务分页
      getpage: {
        id: null,
        page: 1,
        pageSize: 10,
        status: null,
        assignedStatus: null,
        loadingStatus: null,
        licensePlate: '',
        startAgencyId: null,
        endAgencyId: null

      },
      activeName: 'first'
    }
  },
  created() {
    this.getTaskPage()
    this.treeList()
  },
  methods: {
    // 目的地id
    handleNodeClick2(value) {
      this.getpage.endAgencyId = value[1]
    },
    // 起始地id
    handleNodeClick(value) {
      console.log(value[1])
      this.getpage.startAgencyId = value[1]
    },
    // 获取树状
    async treeList() {
      const msg = await treeList()
      this.treeData = transListToTreeData(JSON.parse(msg), '0')
    },
    // 发起搜索
    searchList() {
      this.getTaskPage()
    },
    // 点击重置
    resetForm() {
      this.getpage = {
        id: null,
        page: 1,
        pageSize: 10,
        status: null,
        assignedStatus: null,
        loadingStatus: null,
        licensePlate: '',
        startAgencyId: null,
        endAgencyId: null
      }
      this.getTaskPage()
    },
    // 手动调整弹窗
    async  editdetail(id) {
      this.dialogFormVisible = true
      this.manual.id = id
      const { truck } = await getTransport(id)
      this.truc = truck
    },
    // 提交修改
    async sendinfo() {
      await editdetail(this.manual)
      this.dialogFormVisible = false
      this.$message.success('修改成功')
    },
    // 切换页码
    handleCurrentChange(num) {
      this.getpage.page = num
      this.getTaskPage()
    },
    // 获取任务分页数
    async getTaskPage() {
      const msg = await getTaskPage(this.getpage)
      this.tableData = msg.items
      this.total = Number(msg.counts)
    },

    // 获取运输任务详细信息
    getTransport(id) {
      this.$router.push({ name: 'task-detail', params: { id: id }})
    },
    handleClick(tab) {
      if (tab.name === 'first') {
        this.getpage.status = null

        this.getTaskPage()
      } else if (tab.name === 'second') {
        // 待提货筛选
        this.getpage.status = 1
        this.getTaskPage()
      } else if (tab.name === 'third') {
        // 进行中
        this.getpage.status = 2
        this.getTaskPage()
      } else if (tab.name === 'fourth') {
        this.getpage.status = 3
        this.getTaskPage()
      } else {
        this.getpage.status = 4
        this.getTaskPage()
      }
    }
  }
}
</script>

<style>
.customclass{
  width: 500px!important;
}

.no-wrap-text .el-form-item__label {
  white-space: nowrap;
}
.custom-tabs{
  margin-top: 25px;
  background-color: #ffffff;

}
.custom-tabs .el-tabs__header{
  background-color: #ffffff;
  border: none;

}
.custom-tabs .el-tabs__item{
  border-color: #ffeeeb;
}
.custom-tabs .el-tab-pane{
  margin-top: 25px;
  background-color: #ffffff;

}
.custom-tabs .el-tab-pane:focus{
  background-color: #ffeeeb !important;
  color: #fff;
}

  .el-main {
    background-color: #ffffff;
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
    margin-top: 25px;

  }

  body > .el-container {
    margin-bottom: 40px;
  }
</style>

